<template>
  <div class="information">
    <span class="tag">西安</span>
    <span class="tag">前端开发工程师</span>
    <div class="list-container">
      <div
        class="item"
        v-for="(item, index) in newList"
        :key="index"
        v-show="index < num"
      >
        <template>
          <span>{{ item.year }} </span>
          <div class="process">
            <div
              class="step"
              :style="`width:${(item.salary / topSalary) * 100}%`"
            >
              {{ item.salary }}
            </div>
          </div>
          <div class="arrow-box">
            <i v-if="item.percent > 0" class="iconfont iconicon_shangsheng"></i>
            <i v-else class="iconfont iconicon_xiajiang"></i>
            <span class="percent-span">{{ item.percent }}</span>
          </div>
        </template>
      </div>
      <div class="dis">
        <div @click="add()" v-if="num < 4">
          展示更多
          <i data-v-020852c5="" class="iconfont iconicon_zhankai"></i>
        </div>
        <div @click="sub()" v-else>
          收起显示
          <i data-v-020852c5="" class="iconfont iconicon_zhankai rotate"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { chartdataHot } from '@/api/information.js'
export default {
  name: 'information',
  data () {
    return {
      list: [],
      newList: [],
      topSalary: 0,
      txtSalary: '',
      form: {
        city: '西安',
        position: '前端开发工程师'
      },
      num: 3
    }
  },
  computed: {},
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      const res = await chartdataHot(this.form)
      this.topSalary = res.data.topSalary
      this.list = res.data
      // console.log(this.list)
      this.newList = res.data.yearSalary.sort((a, b) => {
        return a >= b ? -1 : 1
      })
      // console.log(this.newList)
      // console.log(this.newList, this.list)
    },
    add () {
      this.num = 10
    },
    sub () {
      this.num = 3
    }
  }
}
</script>

<style lang="less" scoped>
.information {
  .list-container {
    margin-top: 20px;
  }
  .tag {
    margin-right: 18px;
    display: inline-block;
    padding: 12px;
    border-radius: 5px;
    font-size: 22px;
    color: #545671;
    background-color: #eceaea;
  }
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    span {
      color: #545671;
      font-size: 24px;
    }
    .process {
      margin-left: 24px;
      margin-right: 24px;
      flex: 1;
      background-color: #ebdfdf;
      height: 24px;
      border-radius: 10px;
      .step {
        border-radius: 10px;
        background-color: #fe6d67;
        height: 100%;
        width: 50%;
        font-size: 20px;
        text-align: right;
        box-sizing: border-box;
        padding-right: 10px;
        color: #fff;
      }
    }
    .arrow-box {
      display: flex;
      align-items: center;
      .iconfont {
        font-size: 36px;
        margin-right: 12px;
        width: 36px;
      }
      .iconicon_xiajiang {
        color: #fe6d67;
      }
      .iconicon_shangsheng {
        color: #60d183;
      }
    }
  }
  .dis {
    text-align: center;
    color: #545671;
    font-size: 24px;
    padding: 20px;
    .iconfont {
      font-size: 24px;
    }
    .rotate {
      display: inline-block;
      transform: rotate(180deg);
    }
  }
}
</style>
